import React from 'react';
import Menu from './menu';
import ContentHeader from './ContentHeader';
import '@/pages/common-course/course-common.less';
import '@/pages/home.less';
import { getCourseDetail } from '@/services/teacher/course/course';
import CourseInfo from './course'
import KnowledgeIndex from './knowledge'
import ExerciseIndex from './exercise'
import ExerciseCreate from './exercise/create'
import ExerciseUpdate from './exercise/update'
// import CourseExam from './exam'
import CourseTask from './task';//作业
import ExamInfo from './exam/info'
import ExamExercise from './exam/exercise'
import ExamClassReport from './exam/report'
import ExamAnswer from './exam/report/answerView'
import SceneIndex from './scene_new'
import SceneCreate from './scene/create'
import SceneUpdate from './scene/update'
import Chapter from './chapter'
import ChapterStatisList from './chapter/statis'
import ChapterStatisDetail from './chapter/statis/chapter-detail'
import ChapterStatisStuProcess from './chapter/statis/student-detail'
import TaskReview from './task/components/reviewList'
import QuestionList from './question'
import { Layout } from 'antd';
import WenxinAssistant from '@/components/WenxinAssistant';
import { API } from '@/common/entity/typings';

console.log('ForwordPage file loaded');

interface ForwordPageProps {
  match: {
    params: {
      courseId: string;
      examId?: string;
      sceneId?: string;
    };
  };
  location: {
    pathname: string;
  };
}

interface ForwordPageState {
  course?: API.Course;
  isTeacher: boolean;
}

class ForwordPage extends React.Component<ForwordPageProps, ForwordPageState> {
  state: ForwordPageState = {
    course: undefined,
    isTeacher: false
  };

  constructor(props: ForwordPageProps) {
    super(props);
    console.log('ForwordPage constructor', this.props);
  }

  componentDidMount() {
    console.log('ForwordPage componentDidMount...', this.props.match.params.courseId);
    getCourseDetail(this.props.match.params.courseId).then((result) => this.setState({ course: result.obj }));

    // const { currentUser } = initialState || {};
    // if (currentUser && currentUser.roleList && currentUser.roleList[0].roleId == 3) {
    //   this.setState({ isTeacher: true })
    // };
  }

  componentDidUpdate(prevProps: ForwordPageProps) {
    if (prevProps.match.params.courseId !== this.props.match.params.courseId) {
      getCourseDetail(this.props.match.params.courseId).then((result) => this.setState({ course: result.obj }));
    }
  }

  UNSAFE_componentWillUpdate(nextProps: ForwordPageProps, nextState: ForwordPageState) {
    console.log('ForwordPage UNSAFE_componentWillUpdate...', nextProps);
  }

  UNSAFE_componentWillReceiveProps(nextProps: ForwordPageProps) {
    console.log('ForwordPage componentWillReceiveProps...', nextProps);
  }

  reload = () => {
    getCourseDetail(this.props.match.params.courseId).then((result) => this.setState({ course: result.obj }));
  }

  render() {
    const { pathname } = this.props.location;
    console.log('ForwordPage render: pathname', pathname);
    let menuProps = { active: 'home', courseId: '-1' };//active在menu的选中样式
    let navProps = { active: 1, courseId: '' };//active用于<课程专家>创建课程的功能序号，默认0
    let children;
    const courseId = this.props.match.params.courseId;//课程id
    console.log('ForwordPage render: courseId from params', courseId);

    if (pathname.indexOf('/teacher/course/exam') > -1) {
      const examId = this.props.match.params.examId;
      menuProps = { active: 'exam', courseId: courseId };
      navProps = { active: 0, courseId: courseId };
      children = <ExamInfo courseId={courseId} examId={examId} />
    } else if (pathname.indexOf('/teacher/course/task') > -1) {
      menuProps = { active: 'task', courseId: courseId };
      navProps = { active: 0, courseId: courseId };
      if (pathname.indexOf('/teacher/course/task/review') > -1)
        children = <TaskReview />
      else children = <CourseTask courseId={courseId} />
    } else if (pathname.indexOf('/expert/course/info') > -1) {
      menuProps = { active: 'home', courseId: courseId };
      navProps = { active: 1, courseId: courseId };
      children = this.state.course ? <CourseInfo courseId={courseId} course={this.state.course} reload={this.reload} /> : null;
    } else if (pathname.indexOf('/expert/course/knowledge') > -1) {
      menuProps = { active: 'know', courseId: courseId };
      navProps = { active: 2, courseId: courseId };
      children = <KnowledgeIndex courseId={courseId} />
    } else if (pathname.indexOf('/expert/course/scene/update') > -1) {
      const sceneId = this.props.match.params.sceneId;
      menuProps = { active: 'scene', courseId: courseId };
      navProps = { active: 3, courseId: courseId };
      children = <SceneUpdate courseId={courseId} sceneId={sceneId} />
    } else if (pathname.indexOf('/expert/course/scene/create') > -1) {
      menuProps = { active: 'scene', courseId: courseId };
      navProps = { active: 3, courseId: courseId };
      children = <SceneCreate courseId={courseId} />
    } else if (pathname.indexOf('/expert/course/scene') > -1) {
      menuProps = { active: 'scene', courseId: courseId };
      navProps = { active: 3, courseId: courseId };
      children = <SceneIndex courseId={courseId} />
    } else if (pathname.indexOf('/expert/course/exercise') > -1) {
      menuProps = { active: 'exercise', courseId: courseId };
      navProps = { active: 4, courseId: courseId };
      children = <ExerciseIndex courseId={courseId} />
    } else if (pathname.indexOf('/expert/course/chapter') > -1) {
      menuProps = { active: 'chapter', courseId: courseId };
      navProps = { active: 5, courseId: courseId };
      children = <Chapter courseId={courseId} />
    } else if (pathname.indexOf('/teacher/course/question') > -1) {
      menuProps = { active: 'question', courseId: courseId };
      navProps = { active: 5, courseId: courseId };
      children = <QuestionList courseId={courseId} />
    } else if (pathname.indexOf('/teacher/course/chapter/statis') > -1) {
      let clazzId = this.props.match.params.clazzId;//班级id
      let chapterId = this.props.match.params.chapterId;//章节id
      let serialNum = this.props.match.params.serialNum;//章节序号
      let resourcesId = this.props.match.params.resourcesId;//资源id   
      let userId = this.props.match.params.userId;//学生id   

      menuProps = { active: 'chapter', courseId: courseId };
      navProps = { active: 5, courseId: courseId };
      if (pathname.indexOf('/teacher/course/chapter/statis/list') > -1)
        children = <ChapterStatisList courseId={courseId} clazzId={clazzId} chapterId={chapterId} serialNum={serialNum} />
      else if (pathname.indexOf('/teacher/course/chapter/statis/student/process') > -1)
        children = <ChapterStatisStuProcess courseId={courseId} clazzId={clazzId} chapterId={chapterId} serialNum={serialNum} userId={userId} />
      else if (pathname.indexOf('/teacher/course/chapter/statis/detail') > -1)
        children = <ChapterStatisDetail courseId={courseId} clazzId={clazzId} chapterId={chapterId} serialNum={serialNum} resourcesId={resourcesId} />
    }

    return (
      <Layout>
        <div className="flex course">
          <Menu {...menuProps} />
          <div style={{ width: '97%' }}>
            {this.state.course && <ContentHeader course={this.state.course} courseId={courseId} navProps={navProps} />}
            <div className="course-content">
              {children}
            </div>
          </div>
        </div>
        <WenxinAssistant />
      </Layout>
    );
  }
}

export default ForwordPage;
